<template>
    <div>
        <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
            <van-tabbar-item v-for="nav in footerNav" :key="nav.id" :url="nav.url" :icon="nav.icon">{{ nav.name
            }}</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';


Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
    created() {
        let currentPath = this.$route.path
        let index = this.footerNav.findIndex(item => item.url === '#' + currentPath)
        this.index = index
        this.$store.commit('changeActive', this.index)
    },
    computed: {
        active: {
            get() {
                return this.$store.state.active
            },
            set() {
                this.$store.commit('changeActive', this.index)
            }
        }
    },
    data() {
        return {
            footerNav: [
                {
                    name: '首页',
                    id: 1,
                    icon: 'home-o',
                    url: '#/index'
                },
                {
                    name: '分类页',
                    id: 2,
                    icon: 'label-o',
                    url: '#/types'
                },
                {
                    name: '视频',
                    id: 3,
                    icon: 'video-o',
                    url: '#/video'
                },
                {
                    name: '购物车',
                    id: 4,
                    icon: 'cart-o',
                    url: '#/cart'
                },
                {
                    name: '用户',
                    id: 5,
                    icon: 'manager-o',
                    url: '#/my/index'
                }
            ]
        }
    },
    methods: {

    }
}
</script>

<style></style>
